<template>
  <v-layout wrap justify-center align-center>
    <v-flex md12>
      <span class="title">Account Settings</span>
    </v-flex>
    <v-flex d-flex md8 justify-center align-center>
      <v-flex md3>Email:</v-flex>
      <v-flex md9>
        <v-text-field name="Email" label="Email" v-model="setting.email"></v-text-field>
      </v-flex>
    </v-flex>
    <v-flex d-flex md8 justify-center align-center>
      <v-flex md3>Password:</v-flex>
      <v-flex md9>
        <v-text-field name="Password" label="Password" type="password" v-model="setting.password"></v-text-field>
      </v-flex>
    </v-flex>
    <v-flex d-flex md8 justify-center align-center>
      <v-flex md3>Repeat Password:</v-flex>
      <v-flex md9>
        <v-text-field name="Password" label="Password" type="password" v-model="setting.rpassword"></v-text-field>
      </v-flex>
    </v-flex>
    <v-flex d-flex md8 justify-center align-center>
      <v-flex md3>Username:</v-flex>
      <v-flex md9>
        <v-text-field name="Username" label="Username" v-model="setting.nickName"></v-text-field>
      </v-flex>
    </v-flex>
    <v-flex d-flex md8 justify-center align-center>
      <v-flex md3>Phone Number:</v-flex>
      <v-flex md9>
        <v-text-field name="PhoneNumber" label="Phone Number" v-model="setting.mobilePhone"></v-text-field>
      </v-flex>
    </v-flex>

    <v-flex d-flex md8 justify-center align-center>
      <v-flex md3>Bank/Wallet Account:</v-flex>
      <v-flex md9>
        <v-select :items="accountList" v-model="account.payType"></v-select>
      </v-flex>
    </v-flex>
    <v-flex d-flex md8 justify-center align-center>
      <v-flex md3>Real Name:</v-flex>
      <v-flex md9>
        <v-text-field name="RealName" label="Real Name" v-model="account.trueName"></v-text-field>
      </v-flex>
    </v-flex>

    <v-flex d-flex md8 justify-center align-center>
      <v-flex md3>Account Number:</v-flex>
      <v-flex md9>
        <v-text-field name="AccountNumber" label="Account Number" v-model="account.account"></v-text-field>
      </v-flex>
    </v-flex>

    <v-flex md12>
      <v-btn color="light-blue" dark large @click="onSave">
        <span>Save</span>
      </v-btn>
    </v-flex>
  </v-layout>
</template>


<script lang="ts">
// 使用类装饰器
import { Component, Vue } from "vue-property-decorator";
import { Api, Login } from "@/api";
import Cookie from 'js-cookie';
import { PayMethodKV } from '@/utils/constants';
import { UserLoginInfo } from '../../api/bean';

declare const $Vue: Vue;

@Component
export default class Settings extends Vue {

  private setting: any = {};
  private account: any = {};

  private accountList: Array<any> = PayMethodKV;
  private requiredFields: Array<string> = [
    "email",
    "password",
    "nickName",
    "account",
    "realName",
    "accountNumber",
  ];

  protected mounted() {
    this.getSingleUserInfo();
    this.getAccountList();
  }

  private validate(): boolean {
    let pass = true;
    this.requiredFields.forEach((item: string) => {
      if (this.setting[item] === "") {
        pass = false;
      }
    });
    if (this.setting.password !== this.setting.rpassword) {
      $Vue.$emit("snackbar", {
        text: 'Passwords not equal!',
      });
      return false;
    }
    if (!pass) {
      $Vue.$emit("snackbar", {
        text: 'There are required fields in blank.',
      });
    }
    return pass;
  }

  private onSave() {
    if (this.validate()) {
      this.saveUserInfo();
    }
  }

  /**
   * 保存用户信息
   */
  private saveUserInfo() {
    this.updateLoginInfo();
    this.saveAccount();
  }

  /**
   * 获取账号列表
   */
  private async getAccountList() {
    const params: any = {
      userId: Cookie.get('p_userId'),
    };
    const { data } = await Api.getAccountList.r(params);
    console.log('getAccountList', data);
    if (data.result === 0) {
      // this.setting = data.data;
      if (data.data.dataList.length > 0) {
        let bank = data.data.dataList[0];
        this.account.trueName = bank.trueName;
        this.account.cashId = bank.cashId;
        this.account.payType = bank.payType;
        this.account.account = bank.account;
      }
    } else {
      $Vue.$emit("snackbar", {
        text: data.message,
      });
    }
  }
  /**
   * 获取账号列表
   */
  private async getSingleUserInfo() {
    const params: any = {
      userId: Cookie.get('p_userId'),
    };
    const { data } = await Api.getSingleUserInfo.r(params);
    console.log('getSingleUserInfo', data);
    if (data.result === 0) {
      this.setting = data.data;
    } else {
      $Vue.$emit("snackbar", {
        text: data.message,
      });
    }
  }

  /**
   * 保存 修改提现账号信息
   */
  private async saveAccount() {
    let params: any = {
      userId: Cookie.get('p_userId'),
      trueName: this.account.trueName,
      payType: this.account.payType,
      account: this.account.account,
    };

    if (this.setting.cashId) {
      params.cashId = this.account.cashId;
    }

    const { data } = await Api.saveAccount.r(params);
    console.log('saveAccount', data);
    $Vue.$emit("snackbar", {
      text: data.message,
    });
    if (data.result === 0) {
      // this.setting = data.data

    } else {

    }
  }




  private async updateLoginInfo() {
    const params: UserLoginInfo = {
      userId: Number(Cookie.get('p_userId')),
      userType: 1,
      loginAccount: this.setting.account,
      password: this.setting.password,
      email: this.setting.email,
      mobilePhone: this.setting.mobilePhone,
    };
    const { data } = await Login.updateLoginInfo.r(params);
    console.log('updateLoginInfo', data);
    if (data.result === 0) {
      this.setting = data.data
    } else {
      $Vue.$emit("snackbar", {
        text: data.message,
      });
    }
  }

}
</script>

<style lang="less" scoped>
@import url(../../styles/variables.less);
</style>


